<template>
  <div>
    <div class="flex items-center" style="min-width: 90px">
      <div class="indicator q-mr-sm" :style="getColor('color')"></div>
      <div>{{getColor()}}</div>
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  name: 'set-color',
  props: {
    options: Array, // 枚举状态(包含颜色)
    colorType: [String, Number] // 状态本尊
  },
  data () {
    return {
    }
  },

  methods: {
    getColor (type) {
      const member = _.find(this.options, { value: this.colorType })
      return type === 'color' ? { background: _.get(member, 'color', '') } : _.get(member, 'label', '--')
    }
  },
  mounted () {

  }
}
</script>
<style lang="stylus" scoped>
    .indicator {
      border-radius 50%
      height 10px
      width 10px
    }
</style>
